<template>
  <div class="email_set_box email_template">
    <div @click.stop="showTemp" class="show_editor_btn">
      <span class="iconfont icon-beizhu"></span><span>{{$t('configLazyLoad.channel.mailTip23')}}</span>
    </div>
    <div v-if="showEditor" class="codemirror">
      <div class="template_title" v-html="$t('config.channel.mailTemolateTitle')">
      </div>
      <templateEditor :value="editorCon" @input="receiveData"></templateEditor>
      <el-button type="primary" class="primary_btn" @click.stop="saveTemp">{{$t('public.save')}}</el-button>
    </div>
  </div>
</template>
<script>
  import templateEditor from './MailTemplateEditor.vue'

  export default {
    name: 'MailTemplate',
    data () {
      return {
        sdkDemoEditor2: {},
        editorCon: '',
        mailObj: {},
        options: {
          fontSize: '14px',
          autoScrollEditorIntoView: true,
          maxLines: 50
        },
        editorConNew: '',
        showEditor: false
      }
    },
    methods: {
      saveTemp () {
        let data = this.editorCon
        if (this.editorConNew) {
          data = this.editorCon === this.editorConNew ? this.editorCon : this.editorConNew
        }
        let dataNew = {
          emailModel: data
        }
        this.$store.dispatch('saveRelationEmailConfig', dataNew).then(() => {
          this.showEditor = false
        })
      },
      showTemp () {
        this.showEditor = true
      },
      receiveData (data) {
        this.editorConNew = data
      }
    },
    components: {
      templateEditor
    },
    beforeMount () {
      this.editorCon = ''
      this.mailObj = this.$store.state.config.channelConfig.channelMail.mailInfo.data
      if (this.mailObj && this.mailObj.emailModel) {
        this.editorCon = this.mailObj.emailModel
      } else {
        this.editorCon = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\n' +
          '<html>\n' +
          '<head>\n' +
          '   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />\n' +
          '   <style type="text/css">\n' +
          '   table td {\n' +
          '    border-collapse: collapse;\n' +
          '   }\n' +
          '   </style>\n' +
          '</head>\n' +
          '<body style="width: 100%; margin: 0; padding: 0;">\n' +
          '   <table border="0" style="padding: 10px ; line-height: 18px; font-family: \'Lucida Grande\',Verdana,Arial,sans-serif; font-size: 12px; color:#444444;">\n' +
          '       <tr style="padding: 10px ; "><td>{content}</td></tr>\n' +
          '       <br><tr style="padding: 10px ; "><td>{sign}</td></tr>\n' +
          '       <tr style="color: #aaaaaa; margin: 10px 0 14px 0; padding-top: 10px; border-top: 1px solid #eeeeee;">\n' +
          '          <td>{history}\n</td>' +
          '       </tr>\n' +
          '   </table>\n' +
          '</body>\n' +
          '</html>\n'
      }
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .email_template
    padding 10px 15px
  .template_title
    color $c-prompt
    margin-bottom 20px
  .codemirror
    margin-bottom 20px
    .primary_btn
      float right
  .show_editor_btn
    margin 10px 0 20px
    color $c-main
    cursor pointer
    .iconfont
      font-size 12px
</style>
